<template>
  <div class="login box-b w h over-h ">
    <div class="main">
      <div class="w h f-c">

        <div class="main-left">
          <welcome-card class="b-f"></welcome-card>
        </div>
        <div class="f-c a-i-c">
          <div class="main-right el-card f-g1">

            <div class="login-title"> 欢迎您进入自动标注系统 </div>

            <div class="user-info">
              <div class="user">
                <el-input v-model="username" placeholder="工号" size="large">
                  <template #prepend>
                    <el-icon-render class="el-icon-UserFilled"></el-icon-render>
                  </template>
                </el-input>
              </div>
              <div class="pass">
                <el-input v-model="password" type="password" placeholder="密码" size="large"
                  @keydown.native.enter="loginSubmit()">
                  <template #prepend>
                    <el-icon-render class="el-icon-Lock"></el-icon-render>
                  </template>
                </el-input>
              </div>
              <div class="forget">忘记密码?</div>
            </div>
            <div class="button-info">
              <el-button v-loading="loading" class="user-login-button"
                @click="loginSubmit">登录</el-button>
            </div>
            <div class="bottom-info">
              <span class="bottom-text">
                没有可用的账号? <span class="cur-p" @click="goRegister">注册</span>
              </span>
            </div>
         
          </div>
         
        </div>
      </div>
      <span class="edition">Ver 0.8401201</span>
    </div>
  </div>
</template>

<script lang="ts">
import welcomeCard from '@/views/welcome/welcome-card.vue'
import { login } from '@/apis/login'
import { type RequestCode } from '@/server/base'
import { type LoginUser } from '@/server/index'
import { ElIconRender } from '@/importComponents'

export default {

  components: {
    welcomeCard,
    ElIconRender
  },
  data() {
    return {
      username: '',
      password: '',
      loading: false
    }
  },
  computed: {
    isDevelopment() {
      return import.meta.env.toString() != 'production'
    }
  },
  methods: {
    /**
     * 登录
     */
    loginSubmit() {
      if (!this.username) {
        ;(this as any).$message.error('用户名称不能为空！')
        return
      }
      if (!this.password) {
        ;(this as any).$message.error('用户密码不能为空！')
        return
      }
      this.loading = true
      login({
        username: this.username,
        password: this.password
      })
        .then((res: RequestCode) => {
          // 登录成功 用户信息
          const user = res.data as LoginUser
          ;(this as any).$store.commit('user/setUserInfo', user)
          this.$router.push({ name: 'dataManage' })
        })
        .catch(error => {
          this.loading = false
          // (this as any).$message.error(error.message || error.msg || "登录失败，请稍后再试！");
        })
    },
    goRegister() {
      this.$router.push({ name: 'register' })
    }
  },
  created() {
    if (this.isDevelopment) {
      this.username = 'admin'
      this.password = '123456'
    }
  }
}
</script>

<style lang="css">
.edition{
position: absolute;
right: 20px;
bottom: 20px;
}
.user-info .van-field__control {
  font-size: 16px !important;
}
</style>

<style lang="scss" scoped>
.login {
  box-sizing: border-box;
  background: #fff;

  .main {
    box-sizing: border-box;
    user-select: none;
    padding: 24px 24px;
    height: 100%;
    width: 100%;
    @extend .f-c, .w, .a-i-c;

    .main-left {
      width: 60%;
      height: 100%;
      // min-width: 300px;
      // max-width: 400px;
      margin-right: 120px;
    }

    .main-right {
      width: 40%;
      min-width: 400px;
      max-width: 450px;
      // margin-left: 120px;
      box-sizing: border-box;
      min-height: 520px;
      padding: 38px 54px 66px 52px;
      position: relative;

      .login-title {
        margin-top: 40px;
        /** 文本1 */
        font-size: 26px;
        color: rgba(91, 103, 202, 1);
      }

      .user-info {
        margin-top: 46px;

        .pass {
          margin-top: 30px;
        }

        .user,
        .pass {
          border-bottom: 1px solid rgba(227, 232, 241, 1);
        }

        .user-label {
          width: 20px;
          height: 20px;
        }

        .pass-label {
          width: 20px;
          height: 20px;
        }

        .forget {
          margin-top: 18px;
          font-size: 12px;
          font-weight: 400;
          color: rgba(91, 103, 202, 1);
          text-align: right;
          vertical-align: top;
        }
      }

      .bottom-info {
        position: absolute;
        bottom: 42px;
        width: calc(100% - 50px);
        @extend .f-c, .a-i-c;

        .bottom-text {
          font-size: 14px;
          font-weight: 400;
          color: rgba(44, 64, 110, 1);

          /** 文本2 */
          span {
            font-weight: 700;
          }
        }
      }

      .button-info {
        margin-top: 56px;

        .user-login-button {
          cursor: pointer;
          width: 100%;
          text-align: center;
          line-height: 52px;
          height: 52px;
          border-radius: 14px;
          background: rgba(91, 103, 202, 1);
          box-shadow: -3px 7px 13px 0px rgba(241, 247, 255, 1);
          color: #fff;
        }
      }
    }
  }
}
</style>